﻿@model ProjectHopur23.Models.GameViewModel
@using ProjectHopur23.Models

<link rel="stylesheet" type="text/css" href="/Content/TTTBoard.css" />
<link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
<link rel="stylesheet" type="text/javascript" href="/Scripts/bootstrap.js" />
<link rel="stylesheet" type="text/javascript" href="/Scripts/jquery-1.8.2.js" />


<h2>Spilum Myllu</h2>
<div id="tttGameBoard">
	<table id="tictactoe">
		<tbody>
			<tr>
				<td id="0">&nbsp;</td>
				<td id="1">&nbsp;</td>
				<td id="2">&nbsp;</td>
			</tr>
			<tr>
				<td id="3">&nbsp;</td>
				<td id="4">&nbsp;</td>
				<td id="5">&nbsp;</td>
			</tr>
			<tr>
				<td id="6">&nbsp;</td>
				<td id="7">&nbsp;</td>
				<td id="8">&nbsp;</td>
			</tr>
		</tbody>
	</table>
</div>

<div id="tttStatusBoard">
	<h3>Leikmenn</h3>
	<div id="listOfPlayers">
	@foreach(UserProfile u in Model.listOfPlayers)
	{
		<div class="aPlayer">
			<span>Nafn : @u.UserName</span>
			<span>Stig : @u.score</span>
		</div>
	}

	</div>
</div>
<div class="nextTurn">
<span>Leikma&eth;ur </span><span class="nextPlayer"></span><span> &aacute a&eth gera</span>
    </div>

<div id="commentInterface">
	<div id="replyBox">
		<textarea id="commentText"></textarea>
		<button id="postComment">Senda skilaboð</button>	
	</div>
	<div id="commentBox">
	@foreach(Comment c in Model.comments)
	{
		<div class="aComment">
			<span>@c.timePosted.ToShortTimeString() @c.author: @c.text</span>
		</div>
	}
	</div>
</div>

<script>
	var activeGameId = '@(Model.theActiveGame.ID)';
	var hub = $.connection.ticTacToeHub;
	var userName = '@(HttpContext.Current.User.Identity.Name)';

	hub.client.updatedPlayerList = function (userName, score)
	{
		$("#listOfPlayers").append('<div class=\"aPlayer\"><span>Nafn: ' + userName + '</span><span>Stig: ' + score + '</span></div>');
	};

	function retrieveInitialPlayerId()
	{
	    $(".nextPlayer").text(@Model.theActiveGame.activePlayerId+1);
    }

    hub.client.getNextPlayer = function (playerId)
    {
        var numberOfPlayers = parseInt("@Model.theActiveGame.numberOfPlayers");
    	    var nextPlayer = (playerId % numberOfPlayers) + 1;
    	    $(".nextPlayer").text(nextPlayer);
    }

	function retrieveState()
	{
		hub.server.getGameStates(activeGameId).done(function (value) 
		{
			for (var i = 0; i < 9; i++)
			{
				if (value[i].playerId == 0)
				{
					$("#" + i).text("X");
				}
				else if (value[i].playerId == 1)
				{
					$("#" + i).text("O");
				}
				else 
				{
					$("#" + i).text(" ");
				}
			}
		});
	}

	hub.client.cellClicked = function(cellId, player, playerId, win)
	{
		if (playerId == '0')
		{
			$("#" + cellId).text("X");
		}
		else
		{
			$("#" + cellId).text("O");
		}

		if (win == '1')
		{
			victory(player);
		}
		else if(win == '-1')
		{
			tied();
		}
	};

	function victory(player)
	{
		alert(player + " has won!");
	}

	function tied()
	{
		alert("It's a tie!");
	}

	$.connection.hub.start().done(function ()
	{
		hub.server.join(activeGameId);
		hub.server.updatePlayerList(userName, activeGameId);
		retrieveState();
        // Get activePlayerId to show who's turn it is
		retrieveInitialPlayerId();

		$("#tictactoe tbody tr td").click(function ()
		{
			hub.server.clickCell(activeGameId, userName, this.id);
		});
	});

	// Comment system
	hub.client.postedComment = function (userName, commentText, time)
	{
		$("#commentBox").append('<div class=\"aComment\"><span>' + time + ' ' + userName + ': ' + commentText + '</span></div>');
		$("#commentText").val("");
	};

	$("#postComment").click(function ()
	{
		var commentText = $("#commentText").val();

		hub.server.postComment(userName, commentText, activeGameId);
	});
</script>
